<template>
	<view class="container-card">
           <view v-if="dataInfo.store_info.length > 0">
			   <view class="container-card-item"  @click="jumt(item.device_id)" v-for="(item, index) in dataInfo.store_info" >
			   		<view class="container-card-item-head">
			   			<view class="container-card-item-head-left">
			   				<image src="@/static/avther.png" mode="aspectFill"></image>
			   			</view>
			   			<view class="container-card-item-head-center">
			   				<view class="container-card-item-head-center-title">
			   					<view>门店名: {{ item.device_name }}</view>
			   					<!-- <image src="@/static/comPerson.png" mode="aspectFill"></image> -->
			   				</view>
			   				<view class="container-card-item-head-center-describe">
			   				  电话: {{ item.phone }}
			   				</view>
			   				<view class="container-card-item-head-center-describe">
			   				 门店地址:  {{ item.address }}
			   				</view>
			   			</view>
			   			<view class="container-card-item-head-right">
			   				<u-icon name="arrow-right" size="24"></u-icon>
			   			</view>
			   		</view>
			   		<view class="container-card-item-footer">
			   <!-- 			<view class="container-card-item-footer-info">
			   				<view class="container-card-item-footer-info-item">
			   					<image src="@/static/icon-term.png" mode="aspectFill" class="comm-img"></image>
			   					<view class="comm-text">团队人数</view>
			   					<view class="comm-count">12</view>
			   				</view>
			   				<view class="container-card-item-footer-info-item">
			   					<image src="@/static/address-icon.png" mode="aspectFill"></image>
			   					<view class="comm-text">厦门市湖里区1434神鼎飞丹砂水电费水电费第三方</view>
			   				</view>
			   			</view> -->
			   		</view>
			   	</view>
		   </view>
		   <view v-else>
			   <view class="container-card-item" @click="jumt(item.device_id)" v-for="(item, index) in dataInfo.manager_info">
			   		<view class="container-card-item-head">
			   			<view class="container-card-item-head-left">
			   				<image src="@/static/avther.png" mode="aspectFill"></image>
			   			</view>
			   			<view class="container-card-item-head-center">
			   				<view class="container-card-item-head-center-title">
			   					<view>门店名: {{ item.device_name }}</view>
			   					<!-- <image src="@/static/comPerson.png" mode="aspectFill"></image> -->
			   				</view>
			   				<view class="container-card-item-head-center-describe">
			   				  电话: {{ item.phone }}
			   				</view>
			   				<view class="container-card-item-head-center-describe">
			   				 门店地址:  {{ item.address }}
			   				</view>
			   			</view>
			   			<view class="container-card-item-head-right">
			   				<u-icon name="arrow-right" size="24"></u-icon>
			   			</view>
			   		</view>
			   		<view class="container-card-item-footer">
			   			<view class="container-card-item-footer-box">
			   				<image src="@/static/icon-term.png" mode="aspectFill"></image>
			   				<view class="kx-text">设备数量</view>
			   				<view class="kx-count">{{ item.device_count }}</view>
			   			</view>
			   <!-- 			<view class="container-card-item-footer-info">
			   				<view class="container-card-item-footer-info-item">
			   					<image src="@/static/icon-term.png" mode="aspectFill" class="comm-img"></image>
			   					<view class="comm-text">团队人数</view>
			   					<view class="comm-count">12</view>
			   				</view>
			   				<view class="container-card-item-footer-info-item">
			   					<image src="@/static/address-icon.png" mode="aspectFill"></image>
			   					<view class="comm-text">厦门市湖里区1434神鼎飞丹砂水电费水电费第三方</view>
			   				</view>
			   			</view> -->
			   		</view>
			   	</view>
		   </view>
	</view>
</template>

<script>

export default {
	props: {
	  dataInfo: {
	    type: Object,
		default: {}
	  }
	},
	data(){
	  return {}
	},
	methods: {
	  jumt(sales_manager = ''){
		uni.navigateTo({
			url: `/pages/team/deviceList?salesManager=${sales_manager}`
		})
	  }
	}
}
</script>

<style lang="scss" scoped>
	.comm-img {
	 width: 28rpx;
	 height: 22rpx;
	 object-fit: cover;	
	}
	.comm-text {
	  font-size: 24rpx;
	  color: #6D6D6D;
	  margin: 0 10rpx;  
	}
	.comm-count {
	  font-weight: 700;
	  font-size: 36rpx;
	  color: #3D3D3D;	
	}
	.container{
	 &-card {
		margin-top: 16rpx;
	   &-item {
		   margin: 10rpx auto;
		   width: 680rpx;
		   // height: 220rpx;
		   background: $uni-bg-color;
		   border-radius: 20rpx;
		   padding: 20rpx 0;
		   &-head{
			  @include layout(stretch, center);
			  &-left {
				width: 92rpx;
				height: 92rpx;
				object-fit: cover;
				padding: 24rpx;
				image {
				  width: 100%;
				  height: 100%;
				  border-radius: 50%;
				}  
			  }
			  &-center {
				  flex: 1;
				&-title {
				   @include layout(stretch, center);
				   view {
					margin-right: 20rpx;
					font-weight: 700;
					font-size: 28rpx;
					color: #3D3D3D;
					margin-bottom: 12rpx;
				   }
				   image {
				     width: 162rpx;
					 height: 34rpx;
				     object-fit: cover;
				  }
				}
				&-describe {
				  font-size: 24rpx;
				  color: #6D6D6D;
				  line-height: 1.5;
				  margin-bottom: 12rpx;
				}
			  }
			  &-right {
				margin: 0 24rpx;  
			  }
		   }
		&-footer {
		  @include layout(stretch, stretch);
		  margin: 0 34rpx;
		  &-box {
			@include layout(stretch, center);
			margin-right: 34rpx;
			image {
              @extend .comm-img;
			}
			.kx-text {
              @extend .comm-text;
			}
		    .kx-count {
              @extend .comm-count;
			}
		  }
		  &-info {
			  padding-bottom: 24rpx;
			&-item {
			 @include layout(stretch, center);
			 image {
			  width: 24rpx;
			  height: 26rpx;
			  object-fit: cover;
			 }
			}
		  }
		}
	   }
	 }
	}
</style>